<template>
  <div>

    <span v-for="(item, i) in spkdata" :key="i"></span>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>商家客服</span>
        </div>
      </template>
      <div v-for="(item, i) in spkdata" :key="i" class="text item">
        <div v-if="item.status == 0">
          <div style="width: 3%; float: right; text-align: right; height: 60px">
            <el-avatar>{{ item.nickname }}</el-avatar>
          </div>
          <div style="width: 8%; float: right; text-align: right; height: 60px">
            <el-tag type="success">{{ item.content }}</el-tag>
          </div>
          <div
            style="width: 89%; float: left; text-align: right; height: 60px"
          ></div>
        </div>
        <div v-if="item.status == 1">
          <div
            style="width: 2%; float: left; text-align: right; height: 60px"
          ></div>
          <div style="float: left; width: 5%; height: 60px; text-align: left">
            <el-avatar>{{ item.name }}</el-avatar>
          </div>
          <div style="width: 93%; float: left; text-align: left; height: 60px">
            <el-tag>{{ item.content }}</el-tag>
          </div>
        </div>
      </div>
      <div class="sendmsg">
        <el-input
          placeholder="请输入内容"
          v-model="message"
          class="input-with-select"
        >
        </el-input>
        <el-button type="primary" @click="Send_message">发送</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      sid: this.$route.query.shop_id,
      uid: this.$route.query.user_id,
      chat_id: this.$route.query.chat_id,
      message_list: [],
      message: "", //要发送的消息
      websocket: null,
      spkdata: [],
      
    };
  },
  mounted() {
    console.log("<><><>><", this.sid);
    // 连接websocket
    this.init();
    console.log("商家ID", this.sid);
    console.log("房间号ID", this.chat_id);
    this.getspk()
  },
  methods: {
    // 初始化 连接websocket
    init() {
      var url = "ws://127.0.0.1:8000/ws/chat/" + this.chat_id + "/";
      this.websocket = new WebSocket(url);
      // this.websocket.onopen = this.on_open;
      this.websocket.onerror = this.on_error;
      this.websocket.onmessage = this.on_message;
    },
    // 接收消息
    on_message(e) {
      // console.log('监听关闭' + e)
      console.log("-----接收消息-------", e.data);
      let data = eval("(" + e.data + ")"); //解析对象

      // 添加到消息列表
      this.message_list.push(data);
    },
    // 消息发送
    Send_message() {
      if (!this.message) {
        return;
      }

      // 组织发送的消息
      let data = {
        message: this.message,
        user_id: this.uid,
        sid: this.sid,
        status: 0,
        chat_id: this.chat_id,
      };
      // 清空当前输入框
      this.message = null;
      try {
        // 发送消息
        console.log("===========", data);
        this.websocket.send(JSON.stringify(data));
        this.getspk();
        console.log('absdhaskjd')
      } catch (err) {
        console.log("send failed (" + err.code + ")");
      }
    },
    on_error(e) {
      console.log("WebSocket连接发生错误", e);
      this.reconnect();
    },
    reconnect() {
      var that = this;
      if (that.lockReconnect) return;
      that.lockReconnect = true;
      //没连接上会一直重连，设置延迟避免请求过多
      setTimeout(function () {
        console.info("尝试重连...");
        that.init();
        that.lockReconnect = false;
      }, 5000);
    },
    on_close(e) {
      console.log("connection closed (" + e.code + ")");
      // this.reconnect();
    },

    getspk(){ 
      axios.get("http://127.0.0.1:8000/chat/getuser/", {
          params: { sid: this.sid, uid: this.uid,chat_id:this.chat_id },
        })
        .then((result) => {
          if (result.status == 200) {
            this.spkdata = result.data.data;
            console.log('BBBB',this.spkdata);
          }
        })
        .catch((err) => {});
    }
     
    
  },
};
</script>

<style>
</style>